<template>
    <div class="header-swiper">
      <swiper ref="mySwiper" :options="swiperOptions" >
        <swiper-slide  v-for="item in swiperList" :key="item.id"><img :src="item.image" alt=""></swiper-slide>
        <div class="swiper-pagination" slot="pagination">.</div>
        
      </swiper>
    </div>    
</template>
<script>

export default {
    props:["swiperList"],
    data() {
      return {
         
        swiperOptions: {
          
          autoplay:true,
          speed:1000,
          pagination: {
            el: '.swiper-pagination',
            clickable:true
          },
          loop:true,
          // Some Swiper option/callback...
        }
      }
    },
    computed: {
      swiper() {
        return this.$refs.mySwiper.$swiper
      }
    },
    mounted() {
      console.log('Current Swiper instance object', this.swiper)
      this.swiper.slideTo(3, 1000, false)
    }
}
</script>
<style scoped>
.header-swiper{
  background: #ccc;
  width: 100%;
  /* height: 150px; */
  /* height: 1.8rem; */
  padding-bottom: .35%;
}
.header-swiper img{
  width: 100%;
  /* height: 150px; */
  /* height: 150px; */
}
.header-swiper >>> .swiper-pagination-bullet{
  background: #fff;
}
</style>